<template>
        <p>query传参{{ $route.query}}</p>

    <div class="movie-container">
<router-link to="/movie/1">电影1</router-link>
<!-- 对象的写法 -->
<router-link :to="{ 
    name:'MovieDetails',
  params:{userId:'123'}
    }">电影2</router-link>
<!-- 模板字符串的写法 -->
<router-link :to="`/movie/${a}`">电影3</router-link>
<router-link to="/movie/?userId=5&name=abc">电影4</router-link>

<router-view></router-view>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const a =ref(3)
</script>

<style  scoped>
.movie-container{
    min-height: 150px;
    background-color: #f2f2f2;
}
.movie-container a{
    padding: 10px;
    border:  1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    color: black;
    margin:  0 5px;
}
</style>